Life Track Map

Background

People always say:” Read ten thousand books, walk ten thousand miles.” Some people also say:” Hearts and bodies must be on the road at least one of them.” It means that reading books and travelling is very important for improving oneself, it can help us keep curious about the world and get wider knowledge. But records are essential for such activities. It helps us reflect later. We can write notes for reading, and we can write travel journals as well, but there is no visualization to display our track, showing us clearly where we have been, and in what way.

This project is going to meet this need.

Goals

Capable of logging route and location data and displaying them on an interactive world map.

Glossary

Activity

An activity records an event or a walk. It has the activity title, date, brief description, and the relative link. Generally, an activity contains one or more routes and multiple location marks.

Route

A route is a path between the beginning and the destination. An activity may have various routes and different trip modes, walk, train, bicycle etc. Duration can be recorded for a route.

Location

a location is a remarkable place for an activity. It can be renamed and assigned type, restaurant, hotel, landmark, etc.

Features

• The map can be zoomed out/in
• Provide multiple map styles
• Show the information of an activity when clicking a route
• Activities can be displayed individually or multiply filtered by date, time, or a specific activity

Technical Solution

DFD (Data Flow Diagram)

Database Design

ERD (Entity-Relationship Diagram)

Data Model Diagram

Data Dictionary

1. activities table

2. routes table

3. locations table

APIs Design

1. Get activities

   • path: /api/get_activities
   • method: GET
   • body
     • time_range (<Array>[<datetime>start_time, <datetime>end_time])
     • activity_keyword (<String>)
   • response

   [
   	{
   		<String> id
   		<String> title
   		<String> description
   		<Datetime> datetime
   		<String> link
   		<Array> routes [
   			{
   				<String> id
   				<Datetime> duration
   				<Int> trip_mode
   			}
   		]
   		<Array> locations [
   			{
   				<String> id
   				<String> name
   				<Datetime> duration
   				<String> type
   				<Array> coordinate
   			}
   		]
   	}
   ]
   

2. Save activities

   • path: /api/save_activity
   • method: POST
   • body

   {
   	<String> activity_title
   	<String> activity_description
   	<String> activity_date
   	<String> activity_link
   	<Array> routes [
   		{
   			<Int> duration
   			<Int> distance
   			<Int> mode
   			<String> coordinates 
   		}
   	]
   	<Array> locations [
   		{
   			<String> name
   			<String> tag
   			<String> coordinates
   		}
   	]
   }
   

   • response
     • success / errorMsg

Service Provider Selection

1. database: Cloudflare R2
2. server: Cloudflare Workers + GitHub Pages
3. map server: Google Map Platform

Exhibition

Trail Map

Source Code

• Backend Server
• Client